<template>
<div class="tabbaritem" @click="itemClick">
  <div v-if="!isActive">
    <slot name ="item-icon"></slot>
    </div>

  <div v-else> 
    <slot name="item-icon-active"></slot>
    </div>

<div :style="activeStyle" > 
  <slot name ="item-text"></slot>
 </div>
 
</div>
</template>

<script>

export default {
name: 'tabbaritem',
props:{
  path:String,
  activeColor:{
    type:String,
    default:'red'
  }
},
data(){
  return{
    // isActive:true
  }
},
computed:{
  isActive(){
    //判断当前活跃路由的path是否与该路径（4个）一致，若一致，返回true
    //!== -1 是在这个条件下， 可以从当前4个路径找到活跃路径
    return this.$route.path.indexOf(this.path)!== -1
  },
  activeStyle(){
    return this.isActive ? {color:this.activeColor} :{}
  }

},
methods:{
  itemClick(){
    this.$router.replace(this.path)
  }
}

}

</script>

<style scoped>
  .tabbaritem {
     flex: 1px;
     text-align: center;
     height: 49px;
     font-size: 14px;
   }
   .tabbaritem img{
     width: 24px;
     height: 24px;
     margin-top: 3px;
     vertical-align: middle;
     margin-bottom: 2px;
   }
  
</style>